<template>
	<view>
		<view class="message-ul">
			<view class="message-li">
				<view class="flex-row-between">
					<span class="title">登录成功</span>
					<span class="time">2020-12-03 12:00:00</span>
				</view>
				<view class="content">登录成功</view>
			</view>
			<view class="message-li">
				<view class="flex-row-between">
					<span class="title">个人信息修改成功</span>
					<span class="time">2020-12-03 12:00:00</span>
				</view>
				<view class="content">个人信息修改成功</view>
			</view>
			<view class="message-li">
				<view class="flex-row-between">
					<span class="title">个人信息修改成功</span>
					<span class="time">2020-12-03 12:00:00</span>
				</view>
				<view class="content">消息推送时间修改</view>
			</view>
			<view class="message-li">
				<view class="flex-row-between">
					<span class="title">个人信息修改成功</span>
					<span class="time">2020-12-03 12:00:00</span>
				</view>
				<view class="content">头像修改成功</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>

<style scoped>
	.message-ul {
		width: 100%;
		font-size: 32rpx;
		background: #fff;
	}

	.message-li {
		width: calc(100% - 60rpx);
		height: 144rpx;
		margin: 0 30rpx;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #e5e5e5;
	}

	.message-li:last-child {
		border-bottom: none;
	}

	.message-li .title {
		line-height: 48rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #333;
	}
	
	.message-li .time {
		line-height: 48rpx;
		font-size: 28rpx;
		color: #999;
	}
	
	.message-li .content {
		line-height: 40rpx;
		font-size: 30rpx;
		color: #999;
		margin-top: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

</style>
